<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>parent > child</title>
        <link type="text/css" rel="stylesheet" href='../../css/c1.css'>
        <style>
            *{
                margin: 0 auto;
                padding: 0;
            }
            p{
                padding: 5px 10px;
            }
        </style>
        <script src="../../work/jquery-1.12.4.min.js"></script>
        <script>
            jQuery(function ($) {
                $("#btn1",".code").click(function () {
                    $("form > input").css({backgroundColor:'red'});
                });

            });
        </script>
    </head>
    <body>
    <div class="title">parent > child</div>
    <p>在给定的父元素下匹配所有的子元素。</p>
    <p style="font-weight: bold">parent</p>
    <p style="padding:5px 20px;">任何有效选择器。</p>
    <hr/>
    <p style="font-weight: bold">child</p>
    <p style="padding:5px 20px;">用以匹配元素的选择器，并且它是第一个选择器的子元素。</p>
    <hr/>
    <div class="title">代码示例</div>
    <div class="code">
                    <pre>
                        &lt;script&gt;
                            jQuery(function ($) {
                                $("#btn1",).click(function () {
                                    $("<span>form > input"</span>).css({backgroundColor:'red'});
                                });
                            });
                       &lt;/script&gt;

                      &lt;form&gt;
                            &lt;label&gt;Name:&lt;/label&gt;
                            &lt;input name="name" /&gt;
                            &lt;fieldset&gt;
                                &lt;label&gt;Newsletter:&lt;/label&gt;
                                &lt;input name="newsletter" /&gt;
                            &lt;/fieldset&gt;
                      &lt;/form&gt;
                      &lt;input name="none" /&gt;&lt;br/&gt;
                      &lt;button id="btn1" style="margin: 10px;"&gt;点击查看效果&lt;/button&gt;

                    </pre>
    </div>
    <div class="title">代码示例</div>
    <div class="code">
        <form>
            <label>Name:</label>
            <input name="name" />
            <fieldset>
                <label>Newsletter:</label>
                <input name="newsletter" />
            </fieldset>
        </form>
        <input name="none" /><br/>
        <button id="btn1" style="margin: 10px;">点击查看效果</button>
    </div>
    </body>
</html>